<template>
  <!--注册-->
  <div class="sign-up">
    <img src="./../assets/logo.png" draggable="false">
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="80px">
      <el-form-item prop="uid">
        <el-input class="sign-up-uid" v-model="ruleForm.uid" placeholder="要注册用户账号名"></el-input>
        <el-button type="primary" size="medium" @click="verifyUid()">验证</el-button>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" v-model="ruleForm.password" placeholder="用户密码" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item prop="checkPassword">
        <el-input type="password" v-model="ruleForm.checkPassword" placeholder="用户密码确认" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item prop="mobileNumber">
        <el-input class="sign-up-mobile-number" v-model="ruleForm.mobileNumber" placeholder="手机号码"></el-input>
        <el-button type="primary" size="medium" @click="verifyMobileNumber()">验证</el-button>
      </el-form-item>
      <el-form-item prop="mobileCode">
        <el-input  class="sign-up-input-code" v-model="ruleForm.mobileCode" placeholder="手机验证码"></el-input>
        <el-button :disabled="isDisabled" type="primary" size="medium" @click="getCode()">
          <span v-show="show">获取</span>
          <span v-show="!show" class="count">{{count}} s</span>
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-form-item >
          <el-button type="success" round size="medium" @click="signUp()">注&nbsp;&nbsp;&nbsp;册</el-button>
          <el-link :underline="false" href="/#/reset-p">忘记密码</el-link>|
          <el-link :underline="false" href="/#/">登录</el-link>
        </el-form-item>
      </el-form-item>
    </el-form>
    <div class="sign-up-power">
      © 2021 Powered by zsc ccying
    </div>
  </div>
</template>

<style>
  .sign-up {
    width: 600px;
    margin: auto;
  }
  .sign-up-uid {
    width: 440px;
  }
  .sign-up-mobile-number {
    width: 440px;
  }
  .sign-up-input-code {
    width: 440px;
  }
  .sign-up-power {
    padding-bottom: 10px;
  }
</style>

<script>
  export default {
    data() {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPassword !== '') {
            this.$refs.ruleForm.validateField('checkPassword');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        ruleForm: {
          uid: '',
          password: '',
          checkPassword: '',
          mobileNumber: '',
          mobileCode: '',
        },
        isDisabled: false,
        show: true,
        count: '',
        timer: null,
        rules: {
          uid: { required: true, message: '请输入要注册用户账号名', trigger: 'blur' },
          password: [
            { validator: validatePass, trigger: 'blur' },
            { min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' }
          ],
          checkPassword: [
            { validator: validatePass2, trigger: 'blur' }
          ],
          mobileNumber: { required: true, message: '请输入手机号码', trigger: 'blur' },
          mobileCode: { required: true, message: '请输入手机验证码', trigger: 'blur' }
        }
      };
    },
    methods: {
      verifyUid(){
        this.$http({
          method: 'get',
          url: '/sign-up/verify/uid',
          params: {
            uid: this.ruleForm.uid
          }
      }).then(res=>{
          let {code} = res.data;
          if (code === 200) {
            alert("该账号未被注册");
          } else {
            alert("该账号已被注册，请重新选取账号");
          }
        })
      },

      verifyMobileNumber(){
        this.$http({
          method: 'get',
          url: '/sign-up/verify/mobileNumber',
          params: {
            mobileNumber: this.ruleForm.mobileNumber
          }
        }).then(res=>{
          let {code} = res.data;
          if (code === 200) {
            alert("手机号码未绑定用户账号");
          } else {
            alert("手机号码已经绑定用户账号");
          }
        })
      },

      getCode() {
        //倒计时时间
        const TIME_COUNT = 60;
        if (!this.timer) {
          this.count = TIME_COUNT;
          this.show = false;
          this.isDisabled = true;
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--;
            } else {
              this.show = true;
              // 清除定时器
              clearInterval(this.timer);
              this.timer = null;
            }
          }, 1000)
        };
        this.$http({
          method: 'get',
          url: '/send',
          params: {
            mobileNumber: this.ruleForm.mobileNumber
          }
        })
      },
      signUp() {
        let encodePassword = window.btoa(this.ruleForm.password);
        this.$http({
          method: 'post',
          url: '/sign-up',
          data: this.$qs.stringify({
            uid: this.ruleForm.uid,
            password: encodePassword,
            mobileNumber: this.ruleForm.mobileNumber,
            mobileCode: this.ruleForm.mobileCode
          })
        }).then(res=>{
          let {code} = res.data;
          if (code === 200) {
            alert("注册用户账号成功");
            this.$router.push('/');
          } else if (code === 1300){
            alert("该账号已被注册，请重新选取账号");
          } else if (code === 1400) {
            alert("手机验证码错误");
          } else if (code === 1500){
            alert("该手机号已被绑定，请更换手机号");
          } else {
            alert("注册失败，未知错误")
          }
        })
      }
    }
  }
</script>
